<template>
  <div id="heatmapViewer"></div>
  <div id="heatMap" v-show="false"></div>
</template>

<script setup>
import { CesiumHeatmap } from "cesium-heatmap-es6";
import { onMounted, onUnmounted, ref } from "vue";
import { KyViewer } from "@/plugins/cesium/index.js";

let viewer = null;
onMounted(() => {
  initMap();
});
function initMap() {
  viewer = new KyViewer("heatmapViewer", {});
  initHeatMap();
}

function initHeatMap() {
  const points = [
    // { x: 111, y: 30, value: 12 },
    // { x: 111.3, y: 30.2, value: 7 },
    { x: 111.173, y: 30.69, value: 10 },
    { x: 111.15, y: 30.7, value: 6 },
    { x: 111.152, y: 30.73, value: 4 },
    { x: 111.2, y: 30.67, value: 3 },
    { x: 111.202, y: 30.678, value: 5 },
    { x: 111.204, y: 30.68, value: 8 },
  ];
  const cesiumHeatmap = new CesiumHeatmap(viewer, {
    zoomToLayer: true,
    points,
    heatmapDataOptions: { max: 10, min: 0 },
    heatmapOptions: {
      maxOpacity: 1,
      minOpacity: 0,
    },
  });
  console.log("热力图", cesiumHeatmap);
}

onUnmounted(() => {
  viewer.destroy();
});
</script>

<style scoped>
#heatmapViewer {
  width: 100%;
  height: 100vh;
}
#heatmap {
  width: 500px;
  height: 500px;
}
</style>
